<template>
  <div>
    <div>
      <el-row :span="24" style="margin:26px 0 0;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
          <el-form-item label="提现类别">
            <el-select v-model="formInline.tranferType" style="width: 150px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="红包股转账" value="1"></el-option>
              <el-option label="创客提现" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现状态">
            <el-select v-model="formInline.status" style="width: 150px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="处理中" value="P"></el-option>
              <el-option label="成功" value="TRANSFER_SUCCESS"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现类型">
            <el-select v-model="formInline.tradeNo" style="width: 150px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="抵价券提现" value="DJ"></el-option>
              <el-option label="商家货款提现" value="D1"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="fetchData(1)">查询</el-button>
        </el-form>
		<el-form :inline="true" :model="CashStat" class="demo-form-inline" label-width="100px">
				<el-form-item label="平台支出">
				  {{CashStat.outAmt}}元
				</el-form-item>
		</el-form>
      </el-row>

      <el-table
        :data="pageInfo.dtos"
        v-loading="table_loading"
        element-table_loading-text="加载中"
        stripe
        height="500"
        style="width: 100%">
        <el-table-column
          label="平台订单号"
          width="150"
          prop='outTradeNo'>
        </el-table-column>

        <!-- <el-table-column
          width="150"
          label="出款账号" prop='payerIdentity'>
        </el-table-column> -->
        <el-table-column
          width="150"
          label="入款账号" prop='payeeIdentity'>
        </el-table-column>
        <el-table-column
          label="转账金额"
          width="100"
          prop='transferAmount'>
        </el-table-column>
        <el-table-column
          width="150"
          label="转账时间"
          prop='orderTime'>
        </el-table-column>
        <el-table-column
          width="200"
          label="银行卡名称"
          prop='cardName'>
        </el-table-column>
        <el-table-column
          width="200"
          label="开户人名称"
          prop='userName'>
        </el-table-column>
        <el-table-column
          label="用户ID"
          width="150"
        >
          <template scope="scope">
            <router-link :to="'/user/user_detail/'+scope.row.userId" target="_blank" ><span class="pointer">{{ scope.row.userId}}</span></router-link>
          </template>
        </el-table-column>


<!--        <el-table-column-->
<!--          width="100"-->
<!--          label="快捷通订单号"-->
<!--          prop='tradeNo'>-->
<!--        </el-table-column>-->

        <el-table-column
          width="150"
          label="回调时间"
          prop='backTime'>
        </el-table-column>
        <el-table-column width="160" label="最终状态">
          <template scope="scope">
            <div class="failyy" @click="tcopen(scope.row.failReason)">
              {{scope.row.failReason}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="系统手续费"
          width="120"
          fixed="right"
          prop='transferSysAmount'>
        </el-table-column>
        <el-table-column
          width="120"
          fixed="right"
          label="转账类型"
          >
          <template scope="scope">
            <span v-if="scope.row.tranferType == '1'">红包股转账</span>
            <span v-if="scope.row.tranferType == '2'">创客提现</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="100"
          label="转账状态"
        >
        <template scope="scope">
          <span class="success_stuts" v-if="scope.row.status == '成功'">成功</span>
          <span class="fail_stuts" v-else-if="scope.row.status == '失败'">失败</span>
          <span class="ing_stuts" v-else-if="scope.row.status == '处理中'">处理中</span>
        </template>
          <!-- <template scope="scope">
            <span v-if="scope.row.status == 'P'">处理中</span>
            <span v-else-if="scope.row.status == 'F' || scope.row.status == 'TRANSFER_FAIL'">失败</span>
            <span v-else>成功</span>
          </template> -->
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template scope="scope">
            <!-- 抵价券提现 -->
            <span v-if="scope.row.status1 == 'F' && scope.row.tradeNo == 'DJ' && scope.row.requestNo=='1'">
              <el-button type="primary" size="small" @click="transferAccount(scope.row.outTradeNo)">抵价券转账</el-button>
            </span>
            <span v-if="scope.row.status1 == 'P' && scope.row.tradeNo == 'DJ' && scope.row.requestNo=='1'">
              <el-button type="primary" size="small" @click="transferAccount(scope.row.outTradeNo)">抵价券转账</el-button>
            </span>
            <!-- 抵价券审核 -->
            <span v-if="scope.row.status1 == 'P' && scope.row.tradeNo == 'DJ' && scope.row.requestNo=='0'">
              <el-button type="primary" size="small" @click="transferAccount(scope.row.outTradeNo)">抵价券审核</el-button>
            </span>
            <!-- 商家货款 -->
            <span v-if="scope.row.status1 == 'P' && scope.row.tradeNo == 'D1' && nowtime > formatTime(scope.row.orderTime)">
              <el-button type="primary" plain size="small" @click="examine(scope.row.outTradeNo)">商家货款转账</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginate">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="pageInfo.count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cashList",
  data() {
    return {
      table_loading: true,
      formInline: {
        status: '',
        tranferType:'',
        pageNum: 1,
        tradeNo:''
      },
      pageInfo: {
        pageNum: 1,
        pageSize:20,
        count: 1,
        dtos: []
      },
	  CashStat: {
		  inAmt: 0,
		  outAmt: 0,
		  lastAmt: 0
	  },
    nowtime:0,
    ordertime:0
    }
  },
  created() {
    this.nowtime=Date.parse(new Date());
    // console.log(this.nowtime)
  },
  mounted() {
    let vm = this
    vm.fetchData(1)
  },
  methods: {
    /**
     * @Description: 获取提现记录列表
     * @author liuChen
     * @date 2020-09-08 13:07
    */
    fetchData(page=1) {
      let vm = this
      vm.table_loading = true
      // vm.table_loading = true
      vm.pageInfo.pageNum = page
      vm.formInline.pageNum = page
      // console.log('传上去的',vm.formInline)
      vm.dataApi.ajax('selectKjtTransfer',vm.formInline, res => {
        // console.log('请求下来的',res)
        vm.table_loading = false
        let data = JSON.parse(JSON.stringify(res))
        vm.pageInfo.dtos = data.dtos
        vm.pageInfo.count = data.count
		vm.getCashStat()
      });
    },
    formatTime(str){
        var date = new Date(str.replace(/-/g, '/'));
        var time1 = date.getTime()+86400000;
          // console.log('gai造的时间',time1)
      		return time1;
    },
		getCashStat() {
			let vm = this
			vm.dataApi.ajax('sumKjtTransfer',vm.formInline, res => {
				vm.CashStat.outAmt = res.outAmt
			});
		},
    handleCurrentChange(val) {
      this.fetchData(val);
    },
    examine(outTradeNo){
      this.$confirm('此操作将确定转账, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.dataApi.ajax('storeOkWithraw', {
                  isflag:'1',
                  outTradeNo: outTradeNo,
                  transferType:'2'
                }, res => {
                  this.$message.success('订单号：' + outTradeNo + '操作成功');
                  // 转账完成后，执行一次查询
                  this.fetchData(this.pageInfo.pageNum);
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });
    },
    transferAccount(outTradeNo) {
      var that = this;
      var vm = this;

      this.$confirm('此操作将确定转账, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                vm.dataApi.ajax('storeOkWithraw', {
                  outTradeNo: outTradeNo,
                  isflag:'1',
                  transferType:'1'
                }, res => {
                  that.$message.success('订单号：' + outTradeNo + '操作成功');
                  // 转账完成后，执行一次查询
                  that.fetchData(that.pageInfo.pageNum);
                });

              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });
    },
    tcopen(val) {
            console.log(JSON.stringify(val))
            this.$notify({
              title: '最终状态',
              message: JSON.stringify(val),
              duration: 0
            });
          },
    // tcopen(val) {
    //         this.$alert(val, '最终状态', {
    //           confirmButtonText: '确定',
    //           callback: action => {
    //             // this.$message({
    //             //   type: 'info',
    //             //   message: `action: ${ action }`
    //             // });
    //           }
    //         });
    //       }
  }
}
</script>

<style scoped>
  .failyy{
    max-height: 30px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .success_stuts{
    color: #04BE02;
  }
  .ing_stuts{
    color: #0066CC;
  }
  .fail_stuts{
    color: #D43F3A;
  }
</style>
